<script setup lang="ts">
const props = defineProps({
	position: {
		type: String,
		default: 'left'
	}
})
</script>

<template>
<div class="as-buyer-Item">
	<div class="left" v-if="props.position === 'left'">
		<img src="~/assets/buyer-Item-bg.png" alt="">
	</div>
	<div class="right" :class="props.position === 'left'?'text-left':'text-right'">
		<img class="img-1" src="~/assets/buyer-icon-1.png" alt="">
		<img class="img-2" src="~/assets/buyer-icon-2.png" alt="">
		<img class="img-3" src="~/assets/buyer-icon-3.png" alt="">
		<p class="tips-1">寻找有想象力的产品设计服务， 助我完成 <span>从 0 到 1</span></p>
		<span class="tips-2">唐先生，独立开发者</span>
	</div>
	<div class="left" v-if="props.position === 'right'">
		<img src="~/assets/buyer-Item-bg.png" alt="">
	</div>
</div>
</template>

<style scoped lang="scss">
.as-buyer-Item{
	width: 100%; // 使用灵活宽度而不是固定600px
	max-width: 600px; // 保持最大宽度限制
	height: 300px;
	display: flex;
	.left{
		width: 300px;
		img{
			width: 100%;
			height: 100%;
		}
	}
	.right{
		width: 300px;
		display: flex;
		flex-direction: column;
		justify-content: center;
		background: #F6F6F6;
		padding: 0 38px;
		box-sizing: border-box;
		position: relative;
		// 实现一个向左的大小20像素的三角
		&.text-left{
			&::before{
				content: '';
				display: block;
				width: 0;
				height: 0;
				border-top: 20px solid transparent; /* 上边框 */
				border-right: 20px solid #F6F6F6; /* 右边框（实际显示为三角形的左边） */
				border-bottom: 20px solid transparent; /* 下边框 */
				position: absolute;
				z-index: 2;
				top: 50%;
				left: -20px;
				margin-top: -10px;
			}
		}
		&.text-right{
			&::before{
				content: '';
				display: block;
				width: 0;
				height: 0;
				border-top: 20px solid transparent; /* 上边框 */
				border-right: 20px solid #F6F6F6; /* 右边框（实际显示为三角形的左边） */
				border-bottom: 20px solid transparent; /* 下边框 */
				position: absolute;
				z-index: 2;
				top: 50%;
				right: -20px;
				margin-top: -10px;
				transform: rotate(180deg);
			}
		}
		.img-1{
			width: 95px;
			height: 61px;
			position: absolute;
			top:16px;
			right: 16px;
			z-index: 2;
		}
		.img-2{
			width: 42px;
			height: 32px;
			position: absolute;
			top:72px;
			left: 28px;
			z-index: 2;
		}
		.img-3{
			width: 42px;
			height: 32px;
			position: absolute;
			top:172px;
			right: 32px;
			z-index: 2;
		}
		.tips-1{
			font-size: 16px;
			color: #191E28;
			margin-bottom: 16px;
			span{
				color: rgba(29, 191, 115, 1);
			}
		}
		.tips-2{
			font-size: 12px;
			color: rgba(25,30,40,0.36);
		}
	}
}

// 响应式设计
@media (max-width: 768px) {
	.as-buyer-Item {
		flex-direction: column;
		height: auto;
		min-height: 300px;
		
		.left {
			width: 100%;
			height: 200px;
		}
		
		.right {
			width: 100%;
			min-height: 200px;
			
			&.text-left,
			&.text-right {
				&::before {
					display: none; // 移动端隐藏三角形
				}
			}
		}
	}
}

@media (max-width: 480px) {
	.as-buyer-Item {
		.left {
			height: 150px;
		}
		
		.right {
			padding: 20px;
			min-height: 150px;
			
			.tips-1 {
				font-size: 14px;
			}
			
			.tips-2 {
				font-size: 11px;
			}
		}
	}
}
</style>